<template>
  <view class="container">
    <view class="intro">你好！微聊~~</view>
    <navigator url="../login/index">登录页</navigator>
    <navigator url="../reg/index">注册页</navigator>
    <uni-link
      :href="href"
      class="weui-btn weui-btn_primary"
      :text="'进入'"
    ></uni-link>
    <div class="page">
      <div class="page__hd">
        <h1 class="page__title">ActionSheet</h1>
        <p class="page__desc">弹出式菜单</p>
      </div>
      <div class="page__bd page__bd_spacing">
        <a
          href="javascript:"
          class="weui-btn weui-btn_default"
          id="showIOSActionSheet"
          >iOS ActionSheet</a
        >
        <a
          href="javascript:"
          class="weui-btn weui-btn_default"
          id="showAndroidActionSheet"
          >Android ActionSheet</a
        >
      </div>
      <!--BEGIN actionSheet-->
      <div>
        <div class="weui-mask" id="iosMask" style="display: none"></div>
        <div class="weui-actionsheet" id="iosActionsheet">
          <div class="weui-actionsheet__title">
            <p class="weui-actionsheet__title-text">
              这是一个标题，可以为一行或者两行。
            </p>
          </div>
          <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell weui-actionsheet__cell_warn">
              负向菜单
            </div>
          </div>
          <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="iosActionsheetCancel">
              取消
            </div>
          </div>
        </div>
      </div>

      <div
        class="weui-skin_android"
        id="androidActionsheet"
        style="display: none"
      >
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
          <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
          </div>
        </div>
      </div>
      <!--END actionSheet-->
    </div>
  </view>
</template>

<script>
import "weui";
import weui from "weui.js";
export default {
  data() {
    return {
      href: "https://www.baidu.com",
    };
  },
  methods: {},
  onLoad() {
    weui.alert("Hello World!");
    weui.searchBar("#searchBar");
  },
};
</script>

<style lang="scss">
.container {
  padding: 10px;
  font-size: 14px;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
</style>
